<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport"/>
    <title>公共页面模板</title>
    <link href="${base}/components/element-plus/css/index.css" rel="stylesheet">
    <link href="${base}/css/loading.css" rel="stylesheet">
</head>
<body>
<!-- loading  start -->
<div id="loader">
    <div class="rotate-loading"></div>
    <b> 页面数据加载中 。。。</b>
</div>
<!-- loading end -->

<div id="app" un-cloak>
    <vue-component></vue-component>
</div>
</body>

<#-- freemarker 服务端变量获取 -->
<script type="application/javascript">
    // 获取指定的vue模板名称
    var vue_tmp_name = "${vue_tmp_name}";
    var base = "${base}";
    console.log(base);
    console.log("vue_tmp_name: " + vue_tmp_name)

    function onloadRun() {
        // loading 隐藏
        window.onload = function () {
            // 页面加载后执行的代码
            let elementId = document.getElementById("loader");
            if (elementId) {
                elementId.style.display = "none";
            }
        };
    }
</script>

<#-- unocss 原子样式 https://unocss.jiangruyi.com -->
<script src="${base}/components/unocss/runtime.js"></script>

<#-- vue3 https://cn.vuejs.org -->
<script src="${base}/components/vue3/index.js"></script>

<#-- 加载vue3-sfc-loader https://gitcode.com/gh_mirrors/vu/vue3-sfc-loader -->
<script src="${base}/components/vue3-sfc-loader/index.js"></script>

<#-- less 依赖 https://less.bootcss.com -->
<script src="${base}/components/less/index-v4.js"></script>

<#-- element-plus https://element-plus.org/zh-CN -->
<script src="${base}/components/element-plus/index.js"></script>

<#-- element-plus 图标 -->
<script src="${base}/components/element-plus/icons.js"></script>

<#-- element-plus 国际化修改为中文 -->
<script src="${base}/components/element-plus/zh_cn.js"></script>

<#-- 使用 vue3-sfc-loader 加载页面样例 -->
<script type="module">
    const {createApp, defineAsyncComponent} = Vue;
    const {loadModule} = window['vue3-sfc-loader'];
    import {getCode, getCode2} from "../../../../utils/demo.js";

    onloadRun();

    // 必要的参数:
    // vue 用来加载vue的模块，在vue模版中使用如： import { computed, onDeactivated, onMounted, ref } from "vue";
    // element-plus 用来加载element-plus的模块  在vue模版中使用如：import { button } from "element-plus";
    // 自定义的：
    // less 用来加载less的样式解析模块（模版使用了less就需要给定此参数）在vue模版中使用如：<style scoped lang="less"></style>
    const options = {
        moduleCache: {
            // 引入vue的模块
            vue: Vue,
            // 引入element-plus的模块
            "element-plus": ElementPlus,
            // 引入less的模块
            less: less,
            // 自定义的方式引入其他的方法,在其下面的vue模板中就可以直接使用 例子：查看 btn2.vue  另外一种引入方式：在vue模版中直接mjs文件，例子：查看 btn1.vue
            "custom": {getCode, getCode2}
        },
        async getFile(url) {
            return await fetch(url).then(res => {
                if (!res.ok) throw Object.assign(new Error(res.statusText + " " + url), {res});
                return {
                    getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text()
                };
            });
        },
        addStyle(textContent) {
            const style = Object.assign(document.createElement("style"), {textContent});
            const ref = document.head.getElementsByTagName("style")[0] || null;
            document.head.insertBefore(style, ref);
        }
    };

    const tmpPath = top.location.pathname + "templates/" + vue_tmp_name + ".vue"

    const app = createApp({
        components: {
            'my-component': defineAsyncComponent(() => loadModule(tmpPath, options))
        },
        template: '<my-component></my-component>'
    });

    // 引入ElementPlus组件
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    });
    // 引入ElementPlus图标
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component);
    }
    app.mount("#app")
</script>
</html>